<template>
  <div id="app11">
    <Header1 />
    <Nav />
  <div class="video-materials-page">
    <h1>影视资料</h1>
    <div class="search-bar">
      <input type="text" placeholder="搜索影视资料" v-model="searchQuery" />
      <button @click="performSearch">搜索</button>
    </div>
    <div class="video-list">
      <div class="video-item" v-for="video in currentPageVideos" :key="video.id">
        <img :src="video.thumbnail" alt="视频缩略图" class="video-thumbnail" />
        <div class="video-info">
          <h2>{{ video.title }}</h2>
          <p>{{ video.description }}</p>
          <a :href="video.url" target="_blank">观看视频</a>
        </div>
      </div>
    </div>
    <div class="pagination">
      <button @click="goToPreviousPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
      <button @click="goToNextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
  <Footer1 />
  </div>
</template>

<script>
import Header1 from '@/modules/module2/module2-tudi/components/Header1.vue';
import Nav from '@/modules/module2/module2-tudi/components/Nav.vue';
import Footer1 from '@/modules/module2/module2-tudi/components/Footer1.vue';
export default {
  name: 'VideoMaterials',
  components: {
    Header1,
    Nav,
    Footer1
  },
  data() {
    return {
      searchQuery: '',
      videos: [
        {
          id: 1,
          title: '开国名将视频',
          url: 'https://www.ixigua.com/7411777775360541210?wid_try=1',
          thumbnail: '../../../../../public/217.jpg'
        },
        {
          id: 2,
          title: '开国元勋视频',
          url: 'https://haokan.baidu.com/v?pd=wisenatural&vid=3656215077090445797',
          thumbnail: '../../../../../public/218.jpg'
        },
        {
          id: 3,
          title: '开国领袖视频',
          url: 'https://haokan.baidu.com/v?pd=wisenatural&vid=8455694380899873828',
          thumbnail: '../../../../../public/219.jpg'
        },
        {
          id: 4,
          title: '抗日战争时期视频',
          url: 'https://haokan.baidu.com/v?pd=wisenatural&vid=14142062667063200074',
          thumbnail: '../../../../../public/220.jpg'
        },
        {
          id: 5,
          title: '地雷战',
          url: 'https://www.bilibili.com/video/BV1cYCZYUE96/',
          thumbnail: '../../../../../public/221.jpg'
        },
        {
          id: 6,
          title: '地道战',
          url: 'https://www.bilibili.com/video/BV1K3x4erEFv/',
          thumbnail: '../../../../../public/222.jpg'
        },
        {
          id: 1,
          title: '五十年代视频资料',
          url: '../../../../../public/2.jpg',
          thumbnail: '../../../../../public/223.jpg'
        },
        {
          id: 2,
          title: '六十年代视频资料',
          url: '../../../../../public/217.jpg',
          thumbnail: '../../../../../public/224.jpg'
        },
        {
          id: 3,
          title: '七十年代视频资料',
          url: '../../../../../public/217.jpg',
          thumbnail: '../../../../../public/225.jpg'
        },
        {
          id: 4,
          title: '八十年代视频资料',
          url: '../../../../../public/217.jpg',
          thumbnail: '../../../../../public/226.jpg'
        },
        {
          id: 5,
          title: '00年代视频资料',
          url: '../../../../../public/217.jpg',
          thumbnail: '../../../../../public/227.jpg'
        },
        {
          id: 6,
          title: '九十年代视频资料',
          url: '../../../../../public/217.jpg',
          thumbnail: '../../../../../public/228.jpg'
        },
        {
          id: 1,
          title: '五十年代视频资料',
          url: '../../../../../public/2.jpg',
          thumbnail: '../../../../../public/223.jpg'
        },
        {
          id: 2,
          title: '六十年代视频资料',
          url: '../../../../../public/217.jpg',
          thumbnail: '../../../../../public/224.jpg'
        },
        {
          id: 3,
          title: '七十年代视频资料',
          url: '../../../../../public/217.jpg',
          thumbnail: '../../../../../public/225.jpg'
        },
        {
          id: 4,
          title: '八十年代视频资料',
          url: '../../../../../public/217.jpg',
          thumbnail: '../../../../../public/226.jpg'
        },
        {
          id: 5,
          title: '00年代视频资料',
          url: '../../../../../public/217.jpg',
          thumbnail: '../../../../../public/227.jpg'
        },
        {
          id: 6,
          title: '九十年代视频资料',
          url: '../../../../../public/217.jpg',
          thumbnail: '../../../../../public/228.jpg'
        },
        // 更多视频数据...
      ],
      filteredVideos: [],
      currentPage: 1,
      videosPerPage: 6 // 假设每页显示9个视频
    };
  },
  computed: {
    currentPageVideos() {
      const start = (this.currentPage - 1) * this.videosPerPage;
      const end = start + this.videosPerPage;
      return this.filteredVideos.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.filteredVideos.length / this.videosPerPage);
    }
  },
  methods: {
    performSearch() {
      this.filteredVideos = this.videos.filter(video =>
        video.title.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
      this.currentPage = 1; // 搜索后重置为第一页
    },
    goToPreviousPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    goToNextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    }
  },
  mounted() {
    this.filteredVideos = this.videos; // 初始化时显示所有视频
  }
};
</script>

<style scoped>
.video-materials-page {
  padding: 20px;
}
.search-bar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search-bar input {
  padding: 8px;
  font-size: 16px;
  flex: 1;
}
.search-bar button {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #d32f2f;
  color: white;
  border: none;
  cursor: pointer;
}
.video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 视频项之间的间距 */
}
.video-item {
  width: calc(33.333% - 20px); /* 三列布局，减去间距 */
  box-sizing: border-box;
  background-color: #f9f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
}
.video-thumbnail {
  width: 100%;
  height: 250px;
}
.video-info {
  margin-top: 10px;
}
.video-info h2 {
  margin: 0;
}
.video-info p {
  margin: 5px 0;
}
/* 样式代码... */
.pagination {
  margin-top: 20px;
  text-align: center;
}

</style>
